<template>
  <template v-if="loaded">
    <div style="display:flex;flex-direction:column;align-items: center;position: relative">
      <div style="display:flex; justify-content:space-between;font-size: 20px; font-weight: bold; width: 1400px;margin-bottom: 20px">
        <div>{{resObj['overall']['edition']}}</div>
        <div v-if="'score' in resObj.skill.general">
          <text>综合评分：</text>
          <text>{{resObj.skill.general.score}}</text>
          <template v-if="resObj.rank.general.score">
            <text :class="color(resObj.rank.general.score.percent)">({{resObj.rank.general.score.percent}}%)</text>
          </template>
        </div>
      </div>
      <div class="infoBox">
        <div style="display:flex; flex-direction:row;justify-content: space-around; border: 1px solid #555; font-size: 14px;width: 300px;background-color: #141414">
          <div>
            <div style="margin: 10px 10px 5px">玩家名称：</div>
            <div style="margin: 5px 10px 5px;">服务器：</div>
            <div style="margin: 5px 10px 5px;">战斗时间：</div>
            <div style="margin: 5px 10px 5px;">生成时间：</div>
            <div style="margin: 5px 10px 5px;">副本：</div>
            <div style="margin: 5px 10px 5px;">首领：</div>
            <div style="margin: 5px 10px 5px;">有效人数：</div>
            <div style="margin: 5px 10px 5px;">战斗时长：</div>
            <div style="margin: 5px 10px 10px;">数据种类：</div>
          </div>
          <div>
            <div @click="router.push(`/character/${resObj.overall['server']}/${resObj.overall['name']}`)"
                 style="margin: 10px 10px 5px; color:#409EFF; cursor: pointer">{{ resObj.overall['name'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['server'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['battleTimePrint'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['generateTimePrint'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['map'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['boss'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['numPlayer'] }}</div>
            <div style="margin: 5px 10px 5px;">{{ resObj.overall['sumTimePrint'] }}</div>
            <div style="margin: 5px 10px 10px;">{{ resObj.overall['dataType'] }}</div>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;justify-content: space-between; width: 600px; border: 1px solid #555;margin-left: 20px;margin-right: 20px; background-color: #141414">
          <div style="margin: 10px">
            <div style="font-size: 18px;font-weight: bold;margin-bottom: 10px">装备</div>
            <div v-if="resObj.equip['available']" style="font-size: 14px">
              <ShowEquip :equipInfo="resObj.equip.raw"></ShowEquip>
            </div>
            <div v-if="!resObj.equip['available']" style="font-size: 14px">
              装备信息获取失败。在进入战斗后打开团队装分面板即可获取。如果是第一视角也可以自动获取。
            </div>
          </div>
          <div style="margin: 10px">
            <div style="font-size: 18px;font-weight: bold;margin-bottom: 10px">奇穴</div>
            <div v-if="resObj.qixue['available']" style="font-size: 14px;display: flex;justify-content: space-around">
              <div v-for="i in 12" style="display: flex;flex-direction: column;
                   justify-content: center;align-items: center"
                   @mouseenter="enterQixue($event,qixueTable[resObj.qixue[i]]['desc'])"
                   @mouseleave="leaveQixue($event,'')">
                <img :src="getImageUrl(qixueTable[resObj.qixue[i]]['img'],'skills_logo')" alt="img" style="width: 32px">
                <div>{{ qixueTable[resObj.qixue[i]]['alias'] }}</div>
              </div>
            </div>
            <div v-if="!resObj.qixue['available']" style="font-size: 14px">
              奇穴信息获取失败。在进入战斗后打开团队装分面板即可获取。如果是第一视角也可以自动获取。
            </div>
          </div>
        </div>
        <div style="display: flex;flex-direction: column; border: 1px solid #555; width: 520px; background-color: #141414">
          <div style="margin: 10px 10px 0px 10px;display: flex;justify-content: space-between">
            <div style="font-size: 18px;font-weight: bold">治疗组</div>
            <div style="display: flex;flex-direction: row;align-items: center">
              <el-button link @click="selectHPS = 0">
                <template #default>
                  <span :class="selectHPS === 0 ? 'selected' : 'unselected'">面板HPS</span>
                </template>
              </el-button>
              <el-button link @click="selectHPS = 1">
                <template #default>
                  <span :class="selectHPS === 1 ? 'selected' : 'unselected'">oHPS</span>
                </template>
              </el-button>
              <el-button link @click="selectHPS = 2">
                <template #default>
                  <span :class="selectHPS === 2 ? 'selected' : 'unselected'">aHPS</span>
                </template>
              </el-button>
              <el-button link @click="selectHPS = 3">
                <template #default>
                  <span :class="selectHPS === 3 ? 'selected' : 'unselected'">rHPS</span>
                </template>
              </el-button>
              <el-divider direction="vertical" />
              <el-button link :icon="QuestionFilled" @click="router.push('/help/hps')">帮助</el-button>
            </div>
          </div>
          <div style="margin-left:10px;margin-right:10px; flex-grow: 1">
            <v-chart @click='toPartner' v-if="selectHPS === 0" :option="healer_chart[0]" style="height: 100%;width: 100%"></v-chart>
            <v-chart v-else-if="selectHPS === 1" :option="healer_chart[1]" style="height: 100%;width: 100%"></v-chart>
            <v-chart v-else-if="selectHPS === 2" :option="healer_chart[2]" style="height: 100%;width: 100%"></v-chart>
            <v-chart v-else-if="selectHPS === 3" :option="healer_chart[3]" style="height: 100%;width: 100%"></v-chart>
          </div>
        </div>
      </div>
<!--                  统计面板-->
      <el-tabs type="border-card"  class="statisticBox">
        <el-tab-pane label="即时排名">
          <div class="statisticBoxInner">
            <SkillDisplay :skill="timeFlowData.realTimeRank['hxpy']" :sortList="{
        'key':['num','numPerSec','delay','HPS','effRate'],
        'value':['数量：','每秒数量：','延迟：','HPS：','有效比例：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('hxpy','skills_logo')" alt="回雪飘摇">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">回雪飘摇</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['xlwl']" :sort-list="{
        'key':['num','numPerSec','delay','shuangluanHPS','HPS','cover'],
        'value':['数量：','每秒数量：','延迟：','首跳HPS：','持续HPS：','覆盖率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('xlwl','skills_logo')" alt="翔鸾舞柳">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">翔鸾舞柳</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['sydh']" :sort-list="{
        'key':['num','numPerSec','delay','shuangluanHPS','HPS','cover'],
        'value':['数量：','每秒数量：','延迟：','首跳HPS：','持续HPS：','覆盖率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('sydh','skills_logo')" alt="上元点鬟">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">上元点鬟</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['wmhm']" :sort-list="{
        'key':['num','numPerSec','HPS','cizhiHPS','effRate'],
        'value':['数量：','每秒数量：','HPS：','辞致HPS：','有效比例：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('wmhm','skills_logo')" alt="王母挥袂">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">王母挥袂</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['fxda']" :sort-list="{
        'key':['num','numPerSec','HPS','wanqingHPS','effRate'],
        'value':['数量：','每秒数量：','HPS：','晚晴HPS','有效比例：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('fxda','skills_logo')" alt="风袖低昂">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">风袖低昂</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['zxyz']" :sort-list="{
        'key':['num','numPerSec','HPS','cover'],
        'value':['数量：','每秒数量：','HPS：','覆盖率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('zxyz','skills_logo')" alt="左旋右转">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">左旋右转</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['tzhy']" :sort-list="{
        'key':['num','numPerSec','HPS'],
        'value':['数量：','每秒数量：','HPS：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('tzhy','skills_logo')" alt="七情和合">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">跳珠憾玉</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.realTimeRank['general']" :sort-list="{
        'key':['rdps','efficiency','efficiencyNonGcd'],
        'value':['rDPS：','GCD效率：','战斗效率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('tuanfu','skills_logo')" alt="团辅">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">综合</text>
              </template>
            </SkillDisplay>
          </div>
        </el-tab-pane>
        <el-tab-pane label="全时刻排名">
          <div class="statisticBoxInner">
            <SkillDisplay :skill="timeFlowData.allTimeRank['hxpy']" :sortList="{
        'key':['num','numPerSec','delay','HPS','effRate'],
        'value':['数量：','每秒数量：','延迟：','HPS：','有效比例：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('hxpy','skills_logo')" alt="回雪飘摇">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">回雪飘摇</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['xlwl']" :sort-list="{
        'key':['num','numPerSec','delay','shuangluanHPS','HPS','cover'],
        'value':['数量：','每秒数量：','延迟：','首跳HPS：','持续HPS：','覆盖率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('xlwl','skills_logo')" alt="翔鸾舞柳">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">翔鸾舞柳</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['sydh']" :sort-list="{
        'key':['num','numPerSec','delay','shuangluanHPS','HPS','cover'],
        'value':['数量：','每秒数量：','延迟：','首跳HPS：','持续HPS：','覆盖率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('sydh','skills_logo')" alt="上元点鬟">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">上元点鬟</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['wmhm']" :sort-list="{
        'key':['num','numPerSec','HPS','cizhiHPS','effRate'],
        'value':['数量：','每秒数量：','HPS：','辞致HPS：','有效比例：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('wmhm','skills_logo')" alt="王母挥袂">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">王母挥袂</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['fxda']" :sort-list="{
        'key':['num','numPerSec','HPS','wanqingHPS','effRate'],
        'value':['数量：','每秒数量：','HPS：','晚晴HPS','有效比例：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('fxda','skills_logo')" alt="风袖低昂">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">风袖低昂</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['zxyz']" :sort-list="{
        'key':['num','numPerSec','HPS','cover'],
        'value':['数量：','每秒数量：','HPS：','覆盖率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('zxyz','skills_logo')" alt="左旋右转">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">左旋右转</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['tzhy']" :sort-list="{
        'key':['num','numPerSec','HPS'],
        'value':['数量：','每秒数量：','HPS：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('tzhy','skills_logo')" alt="七情和合">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">跳珠憾玉</text>
              </template>
            </SkillDisplay>
            <SkillDisplay :skill="timeFlowData.allTimeRank['general']" :sort-list="{
        'key':['chuimeiHPS','efficiency','efficiencyNonGcd'],
        'value':['垂眉HPS：','GCD效率：','战斗效率：']}">
              <template #icon>
                <img class="skill_statistic_icon" :src="getImageUrl('tuanfu','skills_logo')" alt="团辅">
                <text style="margin-top: 5px; font-weight: bold;font-size: 16px">综合</text>
              </template>
            </SkillDisplay>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--      时间轴        -->
      <div style="display:flex;flex-direction:row; width: 1400px; border: 1px solid #555;background-color: #141414;position: relative;margin-bottom: 20px">
        <div style="display:flex;flex-direction:column; width: 150px;border-right: 1px solid #555">
          <div style="height: 100px; padding-left:10px; line-height:100px; background-color:#201020; border-bottom: 1px solid #555;">HOT覆盖率</div>
          <div class="label">GCD技能</div>
          <div class="label">回雪飘摇</div>
          <div class="label">非GCD技能</div>
          <div class="label">BOSS机制</div>
        </div>
        <el-scrollbar style="width: 1250px;position: relative" ref="scrollBar" @wheel.prevent="handleScroll">
          <div class="timeFlow">
            <div style="height: 100px;width: 100%;border-bottom: 1px solid #555">
              <v-chart :option="buffCoverChart" style="width: 100%;height: 100%"></v-chart>
            </div>
            <div class="GCD">
              <div v-for="i in timeFlowData.timeScale" style="height: 100%; width: 199px;border-right: 1px solid rgba(85,85,85,0.5)"></div>
              <img v-for="(item, index) in timeFlowData.casting"
                   :src="getImageUrl(item.iconid,'skills_logo')"
                   alt="icon"
                   class="GCD_skill_icon"
                   @mouseenter="enterImg($event,item)"
                   @mouseleave="leaveImg($event,item)"
                   :style="{
                           left:xPosition(item.start),
                           height: icon_length,
                           width: Math.floor(item.duration / 1000 * 40) + 'px'
                          }">
              <img v-for="(item, index) in timeFlowData.firstHit"
                   :src="getImageUrl(item.iconid + '_' + item['hits'],'skills_logo')"
                   alt="icon"
                   class="GCD_skill_icon"
                   @mouseenter="enterImg($event,item)"
                   @mouseleave="leaveImg($event,item)"
                   :style="{
                           left:xPosition(item.start),
                           height: icon_length,
                           width: Math.floor(item.duration * item['hits']/ 1000 * 40) + 'px'
                          }">
            </div>
            <div class="huixue">
              <div v-for="i in timeFlowData.timeScale" style="height: 100%; width: 199px;border-right: 1px solid rgba(85,85,85,0.5)"></div>
              <div class="huixue_icon" v-for="item in timeFlowData.hxpyChannel" :style="{
                backgroundColor:'rgb(255, 127, 255)',
                borderRadius:'3px',
                left:xPosition(item['startTime']),
                height: icon_length,
                width: Math.floor(item['duration'] * 40 / 1000) + 'px'}">
              </div>
            </div>
            <div class="noGCD">
              <div v-for="i in timeFlowData.timeScale" style="height: 100%; width: 199px;border-right: 1px solid rgba(85,85,85,0.5)"></div>
              <img v-for="(item, index) in resObj['replay']['special']"
                   @mouseenter="enterImg($event,item)"
                   @mouseleave="leaveImg($event,item)"
                   :src="getImageUrl(item.iconid,'skills_logo')"
                   alt="icon"
                   class="noGCD_skill_icon"
                   :style="{
               left:xPosition(item.start),
               height: icon_length,
               width: icon_length
             }">
            </div>
            <div class="bossPhase">
              <div v-for="i in timeFlowData.timeScale" style="height: 100%; width: 199px;border-right: 1px solid rgba(85,85,85,0.5)"></div>
              <img v-for="(item, index) in resObj['replay']['environment']"
                   :src="getImageUrl(item.iconid,'skills_logo')"
                   alt="icon"
                   class="bossPhase_icon"
                   @mouseenter="enterImg($event,item)"
                   @mouseleave="leaveImg($event,item)"
                   :style="{
               left: xPosition(item.start),
               height: icon_length,
               width: icon_length
             }">
            </div>
            <div class="timeScale">
              <div v-for="i in timeFlowData.timeScale" style="display:flex; justify-content: space-between;flex-direction:column; height: 100%; width: 199px;border-right: 1px solid rgba(85,85,85,0.5)">
                <text style="margin-left: 10px">{{ (i-1)*5 }}</text>
                <text v-if="(i-1)*5 % 60 === 0" style="margin-left: 10px">{{ (i-1)*5 / 60 }}min</text>
              </div>
            </div>
            <div ref="popUp" v-if="popUpShow" class="popUp">
              <div style="font-size:20px ;font-weight: bold; margin: 10px">{{ popUpDetails['skillname'] }}</div>
              <div v-if="popUpDetails['description']" style="margin: 10px">{{ popUpDetails['description'] }}</div>
              <div v-if="popUpDetails['heal']" style="margin: 10px">治疗量：{{ popUpDetails['heal'] }}</div>
              <div v-if="popUpDetails['healeff']" style="margin: 10px">有效治疗量：{{ popUpDetails['healeff'] }}</div>
              <div v-if="popUpDetails['targetName']" style="margin: 10px" v-html="'目标：' + popUpDetails['targetName']"></div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <!--      手法警察       -->
      <template v-if="'review' in resObj">
        <Review :review="resObj.review[['content']]"></Review>
      </template>
      <template v-if="!('review' in resObj)">
        <div class="reviewBox">
          <div style="height:49px;line-height:49px; margin-left: 15px;font-size: 20px; font-weight: bold">建议</div>
          <div style="margin-left: 10px; margin-bottom: 10px">该战斗记录生成时的复盘版本不支持此功能</div>
        </div>
      </template>
      <!--      奇穴悬浮窗-->
      <div v-if="qixueDetailsShow" ref="qixueBox" class="qixueBoxStyle">
        <div style="font-size:14px; margin: 10px">
          <text>{{ qixueDetails }}</text>
        </div>
      </div>
    </div>
  </template>

  <template v-if="err === 'unsupport'">
    <div style="display: flex;;flex-direction: column;align-items: center;">
      <div style="width: 190px;height: 190px;background-color: #000000;display: flex;justify-content: center;align-items: center">
        <div>
          <div style="font-size:54px; font-weight: bold; display: flex">
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px;margin-right: 10px;margin-bottom: 10px">你</div>
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px">先</div>
          </div>
          <div style="font-size:54px; font-weight: bold;display: flex">
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px;margin-right: 10px">别</div>
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px; color:#000000;
          background-color: rgb(247,151,30)">急</div>
          </div>
        </div>
      </div>
      <div style="font-size: 36px;font-weight: bold;margin-top:40px; margin-bottom: 40px">哈哈，报错了！</div>
      <div style="font-size: 24px">不支持的心法，请等待之后的版本更新！</div>
    </div>
  </template>
  <template v-if="err === 'private'">
    <div style="display: flex;;flex-direction: column;align-items: center;">
      <div style="width: 190px;height: 190px;background-color: #000000;display: flex;justify-content: center;align-items: center">
        <div>
          <div style="font-size:54px; font-weight: bold; display: flex">
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px;margin-right: 10px;margin-bottom: 10px">你</div>
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px">先</div>
          </div>
          <div style="font-size:54px; font-weight: bold;display: flex">
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px;margin-right: 10px">别</div>
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px; color:#000000;
          background-color: rgb(247,151,30)">急</div>
          </div>
        </div>
      </div>
      <div style="font-size: 36px;font-weight: bold;margin-top:40px; margin-bottom: 40px">哈哈，报错了！</div>
      <div style="font-size: 24px">该战斗记录被上传者设置为未公开！</div>
    </div>
  </template>
  <template v-if="err === 'unexist'">
    <div style="display: flex;flex-direction: column;align-items: center">
      <div style="width: 190px;height: 190px;background-color: #000000;display: flex;justify-content: center;align-items: center">
        <div>
          <div style="font-size:54px; font-weight: bold; display: flex">
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px;margin-right: 10px;margin-bottom: 10px">你</div>
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px">先</div>
          </div>
          <div style="font-size:54px; font-weight: bold;display: flex">
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px;margin-right: 10px">别</div>
            <div style="height: 80px;width: 80px;display: flex;justify-content: center;line-height: 80px; color:#000000;
          background-color: rgb(247,151,30)">急</div>
          </div>
        </div>
      </div>
      <div style="font-size: 36px;font-weight: bold;margin-top:40px; margin-bottom: 40px">哈哈，报错了！</div>
      <div style="font-size: 24px">未找到该战斗记录！</div>
    </div>
  </template>
</template>

<script setup>
import { nextTick, ref, toRaw,computed} from 'vue'
import lodash from 'lodash'
import ShowEquip from '../components/ShowEquip.vue'
import SkillDisplay from '../components/SkillDisplay.vue'
import Review from '../components/Review.vue'
import axios from "axios";
import { useRoute, useRouter } from 'vue-router'
import { QuestionFilled } from '@element-plus/icons-vue'
import qiXue from '../components/qiXue.js'

const loaded = ref(false)
const route = useRoute()
const router = useRouter()
const resObj = ref()
const rankObj = ref()
const timeFlowData = ref()
const err = ref()

const xfColor = {
  2:['rgb(127, 31, 223)','rgba(127, 31, 223, 0.4)'],
  5:['rgb(255, 127, 255)', 'rgba(255, 127, 255, 0.4)'],
  6:['rgb(63, 31, 159)', 'rgba(63, 31, 159, 0.4)'],
  22:['rgb(100, 250, 180)','rgba(100, 250, 180, 0.4)'],
  212:['rgb(0, 172, 153)','rgba(0, 172, 153, 0.4)']
}

const occTable = {
  2:'lijingyidao',
  5:'yunchangxinjing',
  6:'butianjue',
  22:'xiangzhi',
  212:'lingsu'
}

const qixueTable = qiXue['yunChangXinJing']

const teamMate = ref()

axios({
  method:'get',
  url: `http://120.48.95.56:8009/getReplayPro?id=${route.params.replay_id}`
}).then((res)=>{
  console.log(res)
  if (res.data.available){
    let repl = res.data['raw'].replace(/'/g, '"').replace(/&#39;/g, '"').replace(/\n/g, '\\n').replace(/\t/g, '\\t');
    let repl2 = res.data['rank'].replace(/'/g, '"').replace(/&#34;/g, '"').replace(/\n/g, '\\n').replace(/\t/g, '\\t');
    let repl3 = res.data['teammate'].replace(/'/g, '"').replace(/&#34;/g, '"').replace(/\n/g, '\\n').replace(/\t/g, '\\t');
    let replay  = JSON.parse(repl)
    resObj.value = JSON.parse(repl)
    let rank = JSON.parse(repl2)
    rankObj.value = JSON.parse(repl2)
    teamMate.value = JSON.parse(repl3)

    let realTimeRank = lodash.cloneDeep(toRaw(resObj.value['skill']))
    for (let item in realTimeRank){
      for (let sub_item in realTimeRank[item]){
        realTimeRank[item][sub_item] = [realTimeRank[item][sub_item]]
        if ('rank' in toRaw(resObj.value)){
          realTimeRank[item][sub_item].push(resObj.value['rank'][item][sub_item])
        }else{
          realTimeRank[item][sub_item].push({num:'无',percent:'无'})
        }
      }
    }
    realTimeRank['general']['chuimeiHPS'] = realTimeRank['xlwl']['chuimeiHPS']
    let allTimeRank = lodash.cloneDeep(toRaw(resObj.value['skill']))
    for (let item in allTimeRank){
      for (let sub_item in allTimeRank[item]){
        allTimeRank[item][sub_item] = [allTimeRank[item][sub_item]]
        if (rankObj.value){
          allTimeRank[item][sub_item].push(rankObj.value[item][sub_item])
        }else{
          allTimeRank[item][sub_item].push({num:'无',percent:'无'})
        }
      }
    }
    allTimeRank['general']['chuimeiHPS'] = allTimeRank['xlwl']['chuimeiHPS']

    const calcGCD = (haste,talent) =>{
      if (haste < 43){}
      else if (haste < 95){return 1500}
      else if (haste >= 95 && haste < 4241){return 1440}
      else if (haste >= 4241 && haste < 8857){return 1380}
      else if (haste >= 8857 && haste < 13851){return 1310}
      else if (haste >= 13851 && haste < 19316){return 1250}
      else{return 1187.5}
    }

    let GCD = calcGCD(replay['overall']['hasteReal'])
    let timeFlowWidth = (replay['replay']['finalTime'] - replay['replay']['startTime']) / 1000 * 40
    let timeScale = Math.floor(timeFlowWidth / 200)

    let channelling = []
    let casting = []
    for (let item of resObj.value['replay']['normal']){
      if (item['skillname'] === '左旋右转'){
        channelling.push(item)
      }else{
        casting.push(item)
      }
    }

    let firstHit = []
    if (channelling.length > 0){
      firstHit.push({...channelling[0]})
      firstHit[0]['hits'] = 1
      for (let i = 1; i < channelling.length; i++){
        if (channelling[i]['start'] - channelling[i - 1]['start'] < 1000){
          firstHit[firstHit.length - 1]['hits'] += 1
          firstHit[firstHit.length - 1]['heal'] = firstHit[firstHit.length - 1]['heal'] + ' / ' + channelling[i]['heal']
          firstHit[firstHit.length - 1]['healeff'] = firstHit[firstHit.length - 1]['healeff'] + ' / ' + channelling[i]['healeff']
          firstHit[firstHit.length - 1]['targetName'] = firstHit[firstHit.length - 1]['targetName'] + '<br>' + channelling[i]['targetName']
        }else{
          firstHit.push({...channelling[i]})
          firstHit[firstHit.length - 1]['hits'] = 1
        }
      }
    }
    console.log(channelling)
    let hxpyChannel = []
    for (let i = 0; i < replay['replay']['hxpy'].length; i++){
      if(replay['replay']['hxpy'][i][1] === 1){
        if (i < replay['replay']['hxpy'].length - 1){
          hxpyChannel.push({
            startTime:replay['replay']['hxpy'][i][0],
            duration:replay['replay']['hxpy'][i + 1][0] - replay['replay']['hxpy'][i][0]
          })
        }else{
          hxpyChannel.push({
            startTime:replay['replay']['hxpy'][i][0],
            duration:replay['replay']['finalTime'] - replay['replay']['hxpy'][i][0]
          })
        }
      }
    }

    timeFlowData.value = {
      GCD,
      timeFlowWidth,
      casting,
      firstHit,
      hxpyChannel,
      timeScale,
      realTimeRank,
      allTimeRank,
    }
    loaded.value = true
  }else{
    if (res.data.text === '数据未公开.'){
      err.value = 'private'
    }
    else if (res.data.text === '不支持的心法，请等待之后的版本更新.'){
      err.value = 'unsupport'
    }
    else if (res.data.text === '结果未找到.'){
      err.value = 'unexist'
    }
  }
})

const color = (score) =>{
  if (score < 25){
    return 'grey'
  }
  else if (score >= 25 && score < 50){
    return 'green'
  }
  else if (score >= 50 && score < 75){
    return 'blue'
  }
  else if (score >= 75 && score < 95){
    return 'purple'
  }
  else if (score >= 95 && score < 98){
    return 'orange'
  }
  else if (score >= 98 && score < 100){
    return 'pink'
  }
  else if (score === 100){
    return 'gold'
  }
  else{
    return 'white'
  }
}

const getImageUrl = (name,folder) => {
  return new URL(`../assets/${folder}/${name}.png`, import.meta.url).href
}

const icon_length = computed(()=>{
  if (loaded.value){
    return Math.floor(timeFlowData.value.GCD / 1000 * 40) + 'px'
  }else{
    return '0px'
  }
})

const timeFlowWidth = computed(()=>{
  if (loaded.value){
    return Math.floor(timeFlowData.value.timeFlowWidth) + 'px'
  }else{
    return '0px'
  }
})

const ChartWidth = computed(()=>{
  if (loaded.value){
    return (Math.floor(timeFlowData.value.timeFlowWidth / 40 * 2) * 20 - 1) + 'px'
  }else{
    return '0px'
  }
})

const xPosition = (time) => {
  return (time - resObj.value['replay']['startTime']) / 1000 * 40 + 'px'
}

const popUpShow = ref(false)
const popUpPos = ref([0,0])
const popUpDetails = ref()
const popUp = ref()

const qixueDetailsShow = ref(false)
const qixuePos = ref([0,0])
const qixueDetails = ref()
const qixueBox =ref()

const enterQixue = ($event,item) => {
  qixueDetails.value = item
  qixueDetailsShow.value = true
  nextTick(()=>{
    qixuePos.value = [$event.target.offsetLeft,$event.target.offsetTop + 50]
  })
}

const leaveQixue = ($event,item) => {
  qixueDetailsShow.value = false
}
const enterImg = ($event,item) => {
  popUpDetails.value = item
  popUpShow.value = true
  nextTick(()=>{
    let leftBias
    if ($event.target.offsetLeft < popUp.value.offsetWidth / 2){
      leftBias = $event.target.offsetLeft
    }
    else if ($event.target.offsetLeft > timeFlowWidth - popUp.value.offsetWidth / 2){
      leftBias = $event.target.offsetLeft - (popUp.value.offsetWidth - timeFlowData.value.GCD / 1000 * 40)
    }
    else {
      leftBias = Math.floor($event.target.offsetLeft  - (popUp.value.offsetWidth - timeFlowData.value.GCD / 1000 * 40) / 2)
    }
    if($event.target.offsetTop >= 203){
      popUpPos.value = [leftBias, $event.target.offsetTop - popUp.value.offsetHeight - 10]
    }else{
      popUpPos.value = [leftBias, $event.target.offsetTop + timeFlowData.value.GCD / 1000 * 40 + 10]
    }
  })
}

const leaveImg = ($event,item) => {
  popUpShow.value = false
}
const scrollBar = ref(null)
const handleScroll = (e) => {
  const wheelDelta = e.wheelDelta || -e.deltaY * 80
  const scrollbar = scrollBar.value
  scrollbar.setScrollLeft(scrollbar.wrap$.scrollLeft - wheelDelta)
}

const selectHPS = ref(0)

const toPartner = (params) => {
  let occ = occTable[resObj.value.healer.table[params.dataIndex]['occ']]
  let id = teamMate.value[resObj.value.healer.table[params.dataIndex]['name']]
  router.push(`/${occ}/${id}`)
}

const healer_chart = computed(()=>{
  if(loaded.value){
    let healer = []
    let hps = []
    let effHps = []
    let aHPS = []
    let oHPS = []
    let rHPS = []
    let occ = []
    for(let item of resObj.value['healer']['table']){
      healer.push(item['name'])
      hps.push(item['heal'] - item['healEff'])
      effHps.push(item['healEff'])
      occ.push(item['occ'])
      if (resObj.value['overall']['edition'].slice(-5) >= '8.1.0'){
        rHPS.push(item['rhps'])
        oHPS.push(item['ohps'])
        aHPS.push(item['ahps'])
      }else{
        rHPS.push(0)
        oHPS.push(0)
        aHPS.push(0)
      }
    }
    let HPSData = {
      tooltip: {
        trigger: 'axis',
        showContent:false,
        axisPointer: {
          type: 'shadow',
        }
      },
      xAxis: {
        type: 'category',
        data: healer,
        triggerEvent:true,
        axisLine:{
          show:false
        },
        axisLabel:{
          color:'white',
          formatter:(value)=>{
            if (value.length > 6){
              let str = value.slice(0,6) + '\n' + value.slice(6)
              return str
            }
            return value
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine:{
          lineStyle:{
            color:'#555'
          }
        }
      },
      series: [
        {
          name: '有效HPS',
          type: 'bar',
          stack: 'total',
          barMaxWidth:'30px',
          label:{
            show:true,
            color:'white',
            offset:[0,-5]
          },
          itemStyle:{
            color:function(params){
              return xfColor[occ[params.dataIndex]][0]
            }
          },
          data: effHps
        },
        {
          name: '虚条HPS',
          type: 'bar',
          stack: 'total',
          label:{
            show:true,
            color:'white',
            offset:[0,-15],
            formatter:function(params){
              return params.value + effHps[params.dataIndex]
            }
          },
          itemStyle:{
            color:function(params){
              return xfColor[occ[params.dataIndex]][1]
            }
          },
          data: hps
        }
      ],
      grid:{
        top:'10px',
        bottom:'30px',
        right:'0px',
        left:'0px'
      }
    }
    let oHPSData = {
      xAxis: {
        type: 'category',
        data: healer,
        axisLine:{
          show:false
        },
        axisLabel:{
          color:'white',
          formatter:(value)=>{
            if (value.length > 6){
              let str = value.slice(0,6) + '\n' + value.slice(6)
              return str
            }
            return value
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine:{
          lineStyle:{
            color:'#555'
          }
        }
      },
      series: [{
        name: 'oHPS',
        type: 'bar',
        barMaxWidth:'30px',
        label:{
          show:true,
          color:'white',
          position:'top'
        },
        itemStyle:{
          color:function(params){
            return xfColor[occ[params.dataIndex]][0]
          }
        },
        data: oHPS
      }],
      grid:{
        top:'15px',
        bottom:'30px',
        right:'0px',
        left:'0px'
      }
    }
    let aHPSData = {
      xAxis: {
        type: 'category',
        data: healer,
        axisLine:{
          show:false
        },
        axisLabel:{
          color:'white',
          formatter:(value)=>{
            if (value.length > 6){
              let str = value.slice(0,6) + '\n' + value.slice(6)
              return str
            }
            return value
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine:{
          lineStyle:{
            color:'#555'
          }
        }
      },
      series: [{
        name: 'aHPS',
        type: 'bar',
        barMaxWidth:'30px',
        label:{
          show:true,
          color:'white',
          position:'top'
        },
        itemStyle:{
          color:function(params){
            return xfColor[occ[params.dataIndex]][0]
          }
        },
        data: aHPS
      }],
      grid:{
        top:'15px',
        bottom:'30px',
        right:'0px',
        left:'0px'
      }
    }
    let rHPSData = {
      xAxis: {
        type: 'category',
        data: healer,
        axisLine:{
          show:false
        },
        axisLabel:{
          color:'white',
          formatter:(value)=>{
            if (value.length > 6){
              let str = value.slice(0,6) + '\n' + value.slice(6)
              return str
            }
            return value
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine:{
          lineStyle:{
            color:'#555'
          }
        }
      },
      series: [{
        name: 'rHPS',
        type: 'bar',
        barMaxWidth:'30px',
        label:{
          show:true,
          color:'white',
          position:'top'
        },
        itemStyle:{
          color:function(params){
            return xfColor[occ[params.dataIndex]][0]
          }
        },
        data: rHPS
      }],
      grid:{
        top:'15px',
        bottom:'30px',
        right:'0px',
        left:'0px'
      }
    }
    return [HPSData,oHPSData,aHPSData,rHPSData]
  }else{
    return [{},{},{},{}]
  }
})

const buffCoverChart = computed(()=>{
  let xAxis = []
  let max = resObj.value['replay']['heat']['timeline'][0].length
  for (let i = 0; i < max; i++){
    xAxis.push((1 + i)* 0.5 + 's')
  }
  return {
    tooltip: {
      trigger: 'axis',
      position:(point, params)=>{
        return [point[0] + 20, 10]
          },
      valueFormatter: (value) => value + '%'
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data:xAxis
    },
    yAxis: {
      type: 'value',
      max: 100,
      splitLine: {
        lineStyle: {
          color:'#555'
        }
      }
    },
    series: [
      {
        name: '翔舞覆盖率',
        type: 'line',
        data: resObj.value['replay']['heat']['timeline'][0],
        symbol:'none'
      },
      {
        name: '上元覆盖率',
        type: 'line',
        data: resObj.value['replay']['heat']['timeline'][1],
        symbol:'none'
      }
    ]
  };
})
</script>

<style scoped>
.skill_statistic_icon{
  height: 60px;
  width: 60px;
}
.qixueBoxStyle{
  position: absolute;
  width: 300px;
  border: 1px solid rgba(85,85,85,0.5);
  border-radius: 12px;
  top: v-bind("qixuePos[1] + 'px'");
  left: v-bind("qixuePos[0] + 'px'");
  background-color: #201020;
}
.infoBox{
  margin-bottom: 20px;
  width: 1400px;
  display: flex;
  flex-direction: row;
}
.statisticBox{
  width: 1400px;
  background-color: #141414;
  border: 1px solid #555;
  margin-bottom: 20px;
}
.statisticBoxInner{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.reviewBox{
  width: 1400px;
  border: 1px solid #555;
  margin-bottom: 20px ;
  background-color: #141414;
}
.timeFlow{
  display: flex;
  position: relative;
  flex-direction: column;
  height: v-bind("(101 + 5 * icon_length) + 'px'");
  width: v-bind("timeFlowWidth");
}
.coverage_chart{
  width: v-bind("ChartWidth")
}
.label{
  background-color: #201020;
  height: v-bind("icon_length");
  border-bottom: 1px solid #555;
  padding-left: 10px;
  line-height: v-bind("icon_length");
}
.GCD{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #555;
  height: v-bind("icon_length");
}
.huixue{
  display: flex;
  flex-direction: row;
  height: v-bind("icon_length");
  border-bottom: 1px solid #555;
}
.bossPhase{
  display: flex;
  flex-direction: row;
  height: v-bind("icon_length");
  border-bottom: 1px solid #555;
}
.timeScale{
  display: flex;
  flex-direction: row;
  height: v-bind("icon_length");
}
.noGCD{
  display: flex;
  flex-direction: row;
  height: v-bind("icon_length");
  border-bottom: 1px solid #555;
}
.bossPhase_icon{
  position: absolute;
  top:v-bind("(101 + 3 * icon_length) + 'px'")
}
.noGCD_skill_icon{
  position: absolute;
  top: v-bind("(101 + 2 * icon_length) + 'px'")
}
.GCD_skill_icon{
  position: absolute;
  top:101px;
}
.huixue_icon{
  position: absolute;
  top:v-bind("(101 + 1 * icon_length) + 'px'")
}
.popUp{
  position: absolute;
  border: 1px solid rgba(85,85,85,0.5);
  border-radius: 12px;
  top: v-bind("popUpPos[1] + 'px'");
  left: v-bind("popUpPos[0] + 'px'");
  background-color: #201020;
  max-width: 450px;
}

:deep(.el-tabs__nav-scroll){
  background-color: #201020;
  border-bottom: 1px solid #555;
}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active){
  color: #409EFF;
  background-color: #141414;
  font-size: 16px;
  font-weight: bold;
}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item){
  color: #FFFFFF;
  font-size: 16px;
}
.selected{
  color: #409EFF
}
</style>